<template>
    <div ref="chartRef" style="width: 100%;height:100%"></div>
</template>
  
<script setup>
  import * as echarts from 'echarts';
  import { onMounted, ref, watch } from 'vue';
  
// 传递过来的类型数据
const props = defineProps({
  typeData: {
    type: Array,
    default: () => [],
    required: true
  }
})
  const chartRef = ref(null);
  let myChart;
  
    onMounted(() => {
        if (!chartRef.value) return
        console.log('typeData',props.typeData);
        myChart = echarts.init(chartRef.value)
        updateChart()
    });      
  
    const updateChart= () => {
    const option = {
    title: {
        text: '园区收益占比',
        // bottom: 'center',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        bottom: '0',
        left: 'center',
        data: ['收入占比', '支出占比']
    },
    series: [
        {
        name: '支出占比',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '35%'],
        
        label: {
            show: false
        },
        data: props.typeData.filter(item => item.name.includes( '支出')),
        },
        {
        name: '收入占比',
        type: 'pie',
        radius: ['45%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
            borderRadius: 10
        },
        label: {
            show: false
        },
        data: props.typeData.filter(item => item.name.includes( '收益')),
        }
    ]
    };
    myChart.setOption(option);
    }

  watch(() => props.typeData, (newData) => {
  if (myChart) {
    updateChart();
  }
}, { immediate: true });
  </script>